<template>
  <AddOrEditDialog
    ref="addOrEditDialogRef"
    title="教学任务"
    :formHeader="formHeader"
    :form="form"
    :action="action"
    :url="$urls.API_URL_BACKSTAGE_SCHOOLTEACHINGTASK_MANAGE"
  >
    <!--    课程下拉框-->
    <template #schoolCourse>
      <el-autocomplete
        v-model="state"
        :fetch-suggestions="querySearch"
        placeholder="请输入专业负责人"
        @select="handleSelect"
        clearable
      />
    </template>

    <!--    学期下拉框-->
    <template #schoolTerm>
      <el-autocomplete
        v-model="schoolTermState"
        :fetch-suggestions="schoolTermSearch"
        placeholder="请输入学期"
        @select="schoolTermSelect"
        clearable
      />
    </template>

    <!--    行政班下拉框-->
    <template #schoolClass>
      <el-autocomplete
        v-model="schoolClassState"
        :fetch-suggestions="schoolClassSearch"
        placeholder="请输入行政班"
        @select="schoolClassSelect"
        clearable
      />
    </template>
    <!--    所属教室下拉框-->
    <template #schoolClassRoom>
      <el-autocomplete
        v-model="schoolClassRoomState"
        :fetch-suggestions="schoolClassRoomSearch"
        placeholder="请输入所属教室"
        @select="schoolClassRoomSelect"
        clearable
      />
    </template>
    <!--    是否为网课-->
    <template #online>
      <div class="mb-2 flex items-center text-sm">
        <el-radio-group v-model="form.online" class="ml-4">
          <el-radio :label="true" size="large">是</el-radio>
          <el-radio :label="false" size="large">否</el-radio>
        </el-radio-group>
      </div>
    </template>
  </AddOrEditDialog>
</template>

<script lang="ts" setup>
import AddOrEditDialog from '@/components/base/table/form/AddOrEditDialog.vue';
import SchoolCourseTree from '@/components/uem/SchoolCourseTree.vue'; // 导入课程下拉框组件
import SchoolTermTree from '@/components/uem/SchoolTermTree.vue'; // 导入学期下拉框组件
import SchoolClassTree from '@/components/uem/SchoolClassTree.vue'; // 导入行政班下拉框组件
import SchoolClassRoomTree from '@/components/uem/SchoolClassRoomTree.vue'; // 导入所属教室下拉框组件
import {
  defineExpose, defineProps, getCurrentInstance, ref, withDefaults,
} from 'vue';
import { FormHeader } from '@/types/interface/base_interface';
import { SchoolMajor, SchoolTeachingTask } from '@/types/interface/school_interface';
import { yesOrNoDict } from '@/api/dict';
import Request from '@/api/request/request';

// 接收父容器参数
interface Props {
  action?: string, // 表单的处理类型，post表示提交，put表示编辑
}
const { proxy } = getCurrentInstance();
const props = withDefaults(defineProps<Props>(), {
  action: 'post',
});
// 表单元素
const formHeader = ref<FormHeader[]>([
  {
    label: '课程',
    prop: 'schoolCourse',
    type: 'custom', // 自定义的意思
    rules: [
      {
        required: true,
        message: '不能为空',
        trigger: 'blur',
      },
    ],
  },
  {
    label: '所属学期',
    prop: 'schoolTerm',
    type: 'custom', // 自定义的意思
    rules: [
      {
        required: true,
        message: '不能为空',
        trigger: 'blur',
      },
    ],
  },
  {
    label: '行政班级',
    prop: 'schoolClass',
    type: 'custom', // 自定义的意思
    rules: [
      {
        required: true,
        message: '不能为空',
        trigger: 'blur',
      },
    ],
  },
  {
    label: '所属教室',
    prop: 'schoolClassRoom',
    type: 'custom', // 自定义的意思
    rules: [
      {
        required: true,
        message: '不能为空',
        trigger: 'blur',
      },
    ],
  },
  {
    label: '班级名称',
    prop: 'className',
    type: 'number',
  },
  {
    label: '教学任务编号',
    prop: 'taskNo',
    type: 'number',
  },
  {
    label: '网络课',
    prop: 'online',
    type: 'custom',
  },
  {
    label: '教学任务介绍',
    prop: 'intro',
    type: 'textarea',
  },

]);
interface RestaurantItem {
  id: number
  value: string
}

const filter = (arr:[]) => {
  let obj:{id:number, value:string};
  let list: any[] = [];
  arr.forEach((item:any) => {
    obj = {
      id: item.id,
      value: item.name,
    };
    list.push(obj);
  });
  return list;
};
const state = ref<string>();

const schoolTermState = ref<string>();
const schoolClassState = ref<string>();
const schoolClassRoomState = ref<string>();
const querySearch = async (queryString: string, cb: any) => {
  let resData:any = await new Request(proxy.$urls.API_URL_BACKSTAGE_SCHOOLCOURSE_MANAGE, null, {
    params: {
      name: queryString,
    },
  }).get();
  if (resData.code === 200) {
    const { data } = resData.data;
    let list = filter(data);
    cb(list);
  }
};
const schoolTermSearch = async (queryString: string, cb: any) => {
  let resData:any = await new Request(proxy.$urls.API_URL_BACKSTAGE_SCHOOLTERM_MANAGE, null, {
    params: {
      name: queryString,
    },
  }).get();
  if (resData.code === 200) {
    const { data } = resData.data;
    let list = filter(data);
    cb(list);
  }
};
const schoolClassSearch = async (queryString: string, cb: any) => {
  let resData:any = await new Request(proxy.$urls.API_URL_BACKSTAGE_SCHOOLCLASS_MANAGE, null, {
    params: {
      name: queryString,
    },
  }).get();
  if (resData.code === 200) {
    const { data } = resData.data;
    let list = filter(data);
    cb(list);
  }
};
const schoolClassRoomSearch = async (queryString: string, cb: any) => {
  let resData:any = await new Request(proxy.$urls.API_URL_BACKSTAGE_SCHOOLCLASSROOM_MANAGE, null, {
    params: {
      name: queryString,
    },
  }).get();
  if (resData.code === 200) {
    const { data } = resData.data;
    let list = filter(data);
    cb(list);
  }
};
// 表单对象
const form = ref<SchoolTeachingTask>();
const handleSelect = (item: RestaurantItem) => {
  form.value!.courseId = item.id; // 将选中的id赋值给要传递后台的form表单
  state.value = item.value; // 对应修改表单绑定值
};
const schoolTermSelect = (item: RestaurantItem) => {
  form.value!.termId = item.id; // 将选中的id赋值给要传递后台的form表单
  schoolTermState.value = item.value; // 对应修改表单绑定值
};
const schoolClassSelect = (item: RestaurantItem) => {
  form.value!.classId = item.id; // 将选中的id赋值给要传递后台的form表单
  schoolClassState.value = item.value; // 对应修改表单绑定值
};
const schoolClassRoomSelect = (item: RestaurantItem) => {
  form.value!.classRoomId = item.id; // 将选中的id赋值给要传递后台的form表单
  schoolClassRoomState.value = item.value; // 对应修改表单绑定值
};
let formInit: SchoolTeachingTask; // 记录表单第一次传入的值,用于表单重置恢复初始值使用
// 打开对话框，gong供父组件调用，传入表单对象
const addOrEditDialogRef = ref();
const openDialog = (schoolTeachingTask: SchoolTeachingTask, action:string) => {
  formInit = { ...schoolTeachingTask }; // 获取初始值，这里要做深拷贝，避免与form对象引用的地址一致，导致无法恢复初始值
  form.value = { ...schoolTeachingTask };

  console.log(form.value);
  // 解决课程，点编辑没有值
  if (form.value.schoolCourse && action !== 'put') {
    state.value = form.value.schoolCourse.name;
  } else {
    state.value = '';
  }
  // 解决学期，点编辑没有值
  if (form.value.schoolTerm && action !== 'put') {
    schoolTermState.value = form.value.schoolTerm.name;
  } else {
    schoolTermState.value = '';
  }
  // 解决行政班级，点编辑没有值
  if (form.value.schoolClass && action !== 'put') {
    schoolClassState.value = form.value.schoolClass.name;
  } else {
    schoolClassState.value = '';
  }
  // 解决教室，点编辑没有值
  if (form.value.schoolClassRoom && action !== 'put') {
    schoolClassRoomState.value = form.value.schoolClassRoom.name;
  } else {
    schoolClassRoomState.value = '';
  }
  addOrEditDialogRef.value!.openDialog();
};

// 提交表单成功后的钩子函数
const afterSubmitSuccess = () => {
  // 让表单恢复为传入对象时的初始值，注意要深度拷贝，避免初始值收到污染
  form.value = { ...formInit };
};
// // 课程
// const beforeSubmit = () => { // 钩子函数，提交表单前的操作
//   form.value!.schoolCourse = { // 创建课程对象
//     id: form.value!.courseId as number,
//   };
//   console.log(form.value);
// };
// 暴露组件给父容器使用
defineExpose({
  openDialog,
});
</script>

<style scoped>

</style>
